<template>
  <div class="root">
    <div class="mianbox">
      <Nav></Nav>
    </div>
    <div class="headerBox">
      <div class="leftBox">
        <img
          class="imgBox"
          src="@/assets/image/header/logo.png"
          @click="$router.push('/home')"
          alt=""
        />
        <div class="titleBox">用户管理后台</div>
      </div>
    </div>
    <div class="bigContent">
      <div class="contentBox">
        <div class="topBox">
          <el-steps
            :active="active"
            finish-status="success"
            :align-center="true"
          >
            <el-step title="确认宝贝"></el-step>
            <el-step title="提交订单"></el-step>
            <el-step title="支付订单"></el-step>
            <el-step title="支付成功"></el-step>
          </el-steps>
        </div>
        <el-divider></el-divider>
        <div class="titleBox">订单已提交，订单编号：{{ orderData.platformOrderSn }}</div>
        <div class="tstext">
          请在
          <span class="redTetx">72小时</span> 内完成支付，否则订单会自动取消
        </div>

        <el-divider></el-divider>
        <div class="titleBox newsi">
          <div>
            商品费用
            <span class="huise">（共{{ orderData.productCount }}件商品）</span>
          </div>
          <div class="">￥{{ orderData.totalAmount }}</div>
        </div>
        <el-divider></el-divider>
        <div class="titleBox newsi">
          <div>代发服务费</div>
          <div class="">￥{{ orderData.productCount }}</div>
        </div>
        <el-divider></el-divider>
        <div class="titleBox newsi">
          <div>快递费</div>
          <div class="">￥{{ orderData.freightAmount }}</div>
        </div>
        <el-divider></el-divider>
        <div class="titleBox newsi">
          <div>应付总金额</div>
          <div class="">￥{{ orderData.payAmount }}</div>
        </div>
        <el-divider></el-divider>
        <div class="titleBox newsi">
          <div>支付方式</div>
        </div>
        <el-divider></el-divider>
        <div class="btnBoxs">
          <div
            class="btnBox"
            @click="arrIndex = index"
            v-for="(item, index) in arr"
            :key="index"
          >
            {{ item }}
            <img
              v-if="arrIndex == index"
              src="../../../static/Imgs/duihao.png"
              class="duihaoImg"
              alt=""
            />
          </div>
        </div>
        <el-divider></el-divider>
        <div class="tjBtn" @click="getPay">立即付款</div>
      </div>
    </div>
    <bottom></bottom>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">微信支付</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="tishi">
          <i class="iconfont icon-weixin"></i>
          请在10分钟内使用微信扫码支付{{ orderData.payAmount }}元
        </div>
        <img :src="wxpay" alt="" />
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
    
    <script>
import Nav from "@/components/Nav/Nav";
import bottom from "@/components/bottom";
import {
  selectPayPageInfo,
  createJsapi,
  queryPayStatus,
} from "@/api/shopDetail";
export default {
  components: { Nav, bottom },
  data() {
    return {
      active: 2,
      arr: ["支付宝", "微信"],
      arrIndex: 0,
      orderData: {},
      dialogVisible: false,
      wxpay: "",
      timer: null,
    };
  },

  created() {
    this.selectPayPageInfo();
  },
  deactivated() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    //获取支付状态
    queryPayStatus() {
      queryPayStatus(this.orderData.platformOrderSn).then((data) => {
        if (data.data == "支付成功") {
          clearInterval(this.timer);
          this.$message({
            message: "支付成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.$router.push('/MyOrder')
        }
        if (data.data == "支付失败") {
          clearInterval(this.timer);
          this.$message.error("支付失败");
          this.dialogVisible = false;
        }
      });
    },
    //提交支付
    getPay() {
      if (this.arrIndex == 1) {
        createJsapi(this.orderData.platformOrderSn).then((data) => {
          this.dialogVisible = true;
          this.wxpay = data.data;
          this.timer = window.setInterval(() => {
            this.queryPayStatus();
          }, 2000);
        });
      }
    },
    //获取详情
    selectPayPageInfo() {
      selectPayPageInfo({
        orderId: this.$route.query.id,
      }).then((data) => {
        this.orderData = data.data;
        if (data.data.payFlag) {
          this.$router.push("/");
        }
      });
    },
  },
};
</script>
    
    <style scoped lang="scss">
@font-face {
  font-family: "iconfont"; /* Project id 3269139 */
  src: url("//at.alicdn.com/t/c/font_3269139_7wqpl7x9ex5.woff2?t=1697709684970")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_3269139_7wqpl7x9ex5.woff?t=1697709684970")
      format("woff"),
    url("//at.alicdn.com/t/c/font_3269139_7wqpl7x9ex5.ttf?t=1697709684970")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-weixin:before {
  content: "\e662";
}
.root {
  background: #fff;
  font-size: 0.12rem;
  .mianbox {
    margin: 0 auto;
    width: 12rem;
    height: 100%;
  }
  .headerBox {
    padding-left: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-bottom: 10px;
    .leftBox {
      display: flex;
      align-items: center;
    }
    .imgBox {
      cursor: pointer;
    }
    .titleBox {
      margin-left: 100px;
      font-size: 24px;
      font-weight: 500;
      color: #444242;
    }
    .queryBox {
      display: flex;
      align-items: center;
      border-radius: 40px;
      width: 4rem;
      background: #ebebeb;
      margin-right: 80px;
      overflow: hidden;
      .leftBox {
        background: #f5f7f9;
        display: flex;
        align-items: center;
        padding: 0 12px;
        font-size: 14px;
        height: 43px;
        line-height: 43px;
        /deep/ .el-icon-search {
          margin-right: 10px;
        }
        /deep/ .el-icon-arrow-down {
          margin-left: 10px;
        }
      }
      /deep/ .el-input__inner {
        border: none;
        background: #ebebeb;
      }
      /deep/ .el-input {
        width: 52%;
      }
      .queryBtn {
        text-align: center;
        background: #e22a1f;
        color: #fff;
        font-size: 16px;
        flex: 1;
        height: 43px;
        line-height: 43px;
        border-radius: 40px;
        cursor: pointer;
      }
    }
  }
  .bigContent {
    background: #f5f7f9;
    padding: 0.2rem 0;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) inset;
  }
  .contentBox {
    width: 60%;
    margin: auto;
    background: #fff;
    border-radius: 4px;
    padding: 0.2rem;
    /deep/ .el-divider {
      margin: 0.2rem 0;
    }
    .topBox {
      /deep/ .el-step__head.is-process {
        color: #fff;
        border-color: #e22a1f;
      }
      /deep/ .el-step__icon.is-text {
        background: #e22a1f;
      }
      /deep/ .el-step__head.is-wait {
        border-color: #e22a1f;
        color: #fff;
      }
      /deep/ .el-step__head.is-success {
        color: #fff;
        border-color: #e22a1f;
      }
      /deep/ .el-step__title.is-success {
        color: #e22a1f;
      }
    }
    .titleBox {
      font-size: 0.16rem;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
    }
    .huise {
      color: #a7adb8;
    }
    .newsi {
      font-weight: 400;
    }
    .btnBoxs {
      display: flex;
      .btnBox {
        margin-right: 0.1rem;
        width: 1.22rem;
        height: 0.45rem;
        border: 0.01rem solid #e22a1f;
        color: #3d3d3d;
        text-align: center;
        line-height: 0.45rem;
        border-radius: 4px;
        font-size: 0.16rem;
        position: relative;
        cursor: pointer;
        .duihaoImg {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 0.36rem;
          height: 0.31rem;
        }
      }
    }
    .tjBtn {
      width: 1.2rem;
      height: 0.4rem;
      color: #fff;
      background: #e22a1f;
      text-align: center;
      font-size: 0.16rem;
      line-height: 0.4rem;
      border-radius: 0.24rem;
      cursor: pointer;
    }
    .tstext {
      font-size: 0.14rem;
      color: #a7adb8;
      margin-top: 0.1rem;
      .redTetx {
        color: #e22a1f;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    .tishi {
      display: flex;
      align-items: center;
      font-size: 0.16rem;
      .icon-weixin {
        color: rgb(67, 201, 62);
        margin-right: 0.1rem;
      }
    }
    .sgBpox {
      font-family: PingFang SC;
      font-size: 0.16rem;
      color: #999999;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 0.24rem;
      border-bottom: 0.01rem solid #e8e8e8;
      padding-bottom: 0.26rem;
      .newSg {
        padding: 0.12rem;
        border: 0.01rem solid #a7adb8;
        margin-right: 0.1rem;
        cursor: pointer;
        margin-bottom: 0.1rem;
      }
    }
    .ysBox {
      font-family: PingFang SC;
      margin-top: 0.15rem;
      font-size: 0.16rem;
      color: #999999;
      display: flex;
      align-items: center;
    }
    .isacitive {
      border: 0.01rem solid #ec6c15 !important;
      color: #ec6c15;
    }
    .newYs {
      font-size: 0.14rem;
      color: #000000;
      margin-left: 0.15rem;
      width: 1.5rem;
    }
    /deep/ .el-input-number .el-input__inner {
      height: auto !important;
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
  .Markers {
    display: flex;
    align-items: center;
    .newQizi {
      width: 18px;
      height: 18px;
    }
    /deep/ .el-radio {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
  /deep/ .huiBtn {
    background: #f5f7f9;
    border-color: #f5f7f9;
    color: #000;
  }
  /deep/ .hongBtn {
    background: #e22a1f;
    color: #fff;
    border-color: #e22a1f;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
</style>
    <style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .queryBox {
    width: 6rem !important;
  }
  .contentBox {
    width: 90% !important;
  }
}
</style>
  